Cloud Storageを使ったカスタムドメインでHTTPSのSPA環境を構築する #gcp

はじめに

こんにちは、中村です。Cloud Storageを使ってカスタムドメインでHTTPSのSPA環境を構築します。今回はRoute53で管理しているドメイン、SSLはGoogleマネージドのSSL証明書を利用します。

Search Consoleでドメインの所有権確認

この操作はGCPと同じGoogleアカウントで行ってください

静的ウェブサイトのホスティングにあたりドメイン名を持つバケットを作成しますのでまずは利用するドメインの所有権確認を行います。Google Search ConsoleでDNSレコードでの所有権の確認の指示を元に実施します。ドメインでドメイン名を入力し続行をクリックします。

表示されるTXTレコードを利用するドメインのDNSプロバイダにて登録し確認をクリックします。

確認トークンが見つからない場合はエラーが表示されます。後ほど確認しましょう。

成功すると下記のインフォメーションが表示されます。

Cloud Storageバケットの作成

Storageにアクセスし、バケットを作成をクリックしてください。バケット名を先ほど所有権を確認したドメイン名で作成します。その他の設定は下記にしてください。

Key	Value
データの保存場所	Region asia-northeast1（東京）
データのデフォルトのストレージクラス	Standard
オブジェクトへのアクセスを制御する方法	きめ細かい管理

作成が完了したら一覧に戻り、バケット設定でウェブサイトの構成を編集をクリックしてインデックスページサフィックス・エラーページにindex.htmlと入力し保存をクリックします。

バケットの詳細にアクセスして権限タブでメンバーを追加をクリックし、下記の情報を入力し保存をクリックします。

Key	Value
新しいメンバー	allUsers
ロール	ストレージオブジェクト閲覧者

Cloud Load Balancingの作成

負荷分散にアクセスし、ロードバランサーの作成をクリックします。負荷分散の種類が表示されるので、HTTP(S)負荷分散の設定を開始をクリックします。

インターネットから自分のVMへをチェックし続行をクリックしロードバランサー名を入力します。次にバックエンドの設定をクリックし、バックエンドバケットを作成する。先ほど作成したGCSバケットを参照しCloud CDNを有効にするにチェックを入れて作成をクリックします。

フロントエンドの設定をクリックし、プロトコルをHTTPSを選択します。IPアドレスはIPアドレスの作成をクリックし静的IPアドレス名を入力し保存します。またHTTPSなのでポートは443を選択します。

証明書は新しい証明書の作成をクリックし、作成モードをGoogle管理の証明書を作成するを選択・利用するドメインを入力して作成をクリックします。

確認と完了をクリックして作成するロードバランサーの設定を確認し、作成をクリックします。作成されたIPアドレスでDNSレコードを作成します、またGoogleマネージドSSL証明書のためにCAA DNSレコードを作成します。

• your_domain. CAA 0 issue “letsencrypt.org”
• your_domain. CAA 0 issue “pki.goog”

Google マネージド証明書のプロビジョニングには最長で 60 分かかります。またロードバランサーで使用できるまでは、追加で30分ほどかかる可能性があるので待ちながら次のステップに進みましょう。この後利用するCloud ShellでSSL証明書のステータスを確認できます。

$ gcloud beta compute ssl-certificates list --global

Cloud Shellでサンプルアプリの作成

Cloud Shellでサンプルアプリを作成します。ヘッダーのプロンプトアイコンをクリックしてCloud Shellを起動します。

npxコマンドが利用できますのでReactアプリを作成します。

$ npx create-react-app sample-app && sample-app
$ yarn start

Cloud Shell内で起動したアプリケーションにアクセスするには、ウェブでプレビューをクリックし、ポートを変更のプルダウンから3000を選択します。別タブにてローカルホストのアプリを確認できます。エディタを開くをクリックして、src/App.jsを編集・保存します。先ほど立ち上がった別タブのアプリにも変更がされているはずです。

$ cat src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
 return (
   <div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <h1>Hello World from Cloud Shell editor...!</h1>
     </header>
   </div>
 );
}
export default App;

変更が確認できたらControl + cでサーバーを停止し、ビルドコマンドを実行します。

$ yarn build

これでbuildディレクトリができたはずです。次はこのディレクトリ内のファイルをCloud Storageにアップロードします。

gsutilでデプロイ

サンプルアプリを作成したCloud Shellで下記のgsutilコマンドを実行しデプロイ作業をします。gsutilは、コマンドラインからCloud Storageを操作することができるpythonアプリケーションです。

$ ls -la
total 532
drwxr-xr-x    6 xxxxx xxxxx   4096 May  4 22:34 .
drwxr-xr-x   12 xxxxx xxxxx   4096 May  4 22:31 ..
drwxr-xr-x    3 xxxxx xxxxx   4096 May  4 22:34 build
-rw-r--r--    1 xxxxx xxxxx    310 May  4 21:40 .gitignore
drwxr-xr-x 1028 xxxxx xxxxx  36864 May  4 21:40 node_modules
-rw-r--r--    1 xxxxx xxxxx    746 May  4 21:40 package.json
drwxr-xr-x    2 xxxxx xxxxx   4096 May  4 21:40 public
-rw-r--r--    1 xxxxx xxxxx   2884 May  4 21:40 README.md
drwxr-xr-x    2 xxxxx xxxxx   4096 May  4 21:40 src
-rw-r--r--    1 xxxxx xxxxx 468872 May  4 21:40 yarn.lock
$ cd build
$ gsutil cp -r . gs://xxxxxxxxxxx/
:
:
:
Operation completed over 19 objects/478.4 KiB.

これで準備はOKです。https://${domain_name}/でアクセスできるか確認してみてください。

まとめ

Cloud Storage・Cloud Load Balancing・Cloud Shellを使ってカスタムドメインでHTTPSのSPA環境を構築できました。AWSの場合は、Amplify ConsoleやCloudfront・S3・ACMで上記の機能が実現することが多く、GCPで行う場合にステップ数が多く感じられました。しかしCloud Shellを使ってみて、簡単かつブラウザで全て完結できるのは良い点だなと思いました。

参考資料

• 静的ウェブサイトのホスティング
• ドメインの所有権の確認
• GoogleマネージドSSL証明書の使用
• facebook/create-react-app
• gsutilツール